<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 轮播图 -->
		<view style="position: relative;z-index: 2;width: 95%;margin:15rpx auto 0 auto;">
			<u-swiper radius="15" height="350rpx" :index="index" :list="bannerlists" :circular="true"
				imgMode="scaleToFill" interval='3000'></u-swiper>
		</view>
		<!-- 菜单栏-->
		<view style="display: flex;flex-flow: row;margin:20rpx 0 0 30rpx;align-items: center;">
			<!-- 小方框 -->
			<view
				style="display: flex;width:8rpx;height: 29rpx;background-color:red;border-radius: 10rpx;margin:0 20rpx;">
			</view>
			<view class="">
				菜单栏
			</view>
		</view>


		<!-- 根据不同身份显示不同菜单 -->
		<view
			style="display: flex;flex-direction:column;font-size: 26rpx; background-color: white;margin: 10rpx auto;border-radius: 20rpx;box-shadow: 2rpx 2rpx 5rpx 5rpx #eee;align-items: center;justify-content: center;">
			<view style="width: 100%;margin: 20rpx 10rpx;">
				<view
					style="display: flex;width: 640rpx;margin: 0 auto 0 auto;flex-wrap: wrap;justify-content: space-around;">
					<view v-for="item in caidanlists" v-if="quankezx_userinfo.permission.indexOf(item.shenfen)!=-1"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:160rpx;margin:20rpx 0;"
						@click="caidan(item)">
						<image style="width: 90rpx;height: 90rpx;" :src="item.pic" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
							{{item.candan_name}}
						</view>
					</view>
					<!-- 下面是填位使用 -->
					<view v-if="(4-caidanshu % 4 >0 && caidanshu%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:160rpx;margin:20rpx 0">
						<image style="width: 90rpx;height: 90rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
					<view v-if="(4-caidanshu % 4 >1 && caidanshu%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:160rpx;margin:20rpx 0">
						<image style="width: 90rpx;height: 90rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
					<view v-if="(4-caidanshu % 4 >2 && caidanshu%4!=0)"
						style="display: flex;flex-direction: column;justify-content: center;align-items: center;width:160rpx;margin:20rpx 0">
						<image style="width: 90rpx;height: 90rpx;" src="" mode=""></image>
						<view style="display: flex;justify-content: center;margin-top:10rpx;">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				caidanshu: 0,
				caidanlists: [{
						candan_name: "我的卡片",
						pic: "../../static/caidan/laoshifengcai.png",
						shenfen: "get_laoshilist",
						url: "/pages/ka_list/ka_list"
					},
					{
						candan_name: "我的经销商",
						pic: "../../static/caidan/genggaijilu.png",
						shenfen: "get_genggailist",
						url: "/pages/daili_list/daili_list"
					},
					{
						candan_name: "我的客户",
						pic: "../../static/caidan/baokeliebiao.png",
						shenfen: "get_baokelist",
						url: "/pages/xueshenginfor/xueshenginfor"
					}
					,
					{
						candan_name: "礼品卡激活",
						pic: "../../static/caidan/xinshengbaoke.png",
						shenfen: "update_baokelist",
						url: "/pages/ka_jihuo/ka_jihuo"
					},
					{
						candan_name: "兑换订单",
						pic: "../../static/caidan/jiaoshiguanli.png",
						shenfen: "update_baokelist",
						url: "/pages/dingdan_list/dingdan_list"
					},
					{
						candan_name: "新代理",
						pic: "../../static/caidan/xiaoqu.png",
						shenfen: "update_xiaoqu",
						url: "/pages/fenxiang/fenxiang"
					},
					// {
					// 	candan_name: "教室管理",
					// 	pic: "../../static/caidan/jiaoshi.png",
					// 	shenfen: "update_jiaoshi",
					// 	url: "/pages/jiaoshi/jiaoshi"
					// },
					// {
					// 	candan_name: "课程管理",
					// 	pic: "../../static/caidan/kecheng.png",
					// 	shenfen: "update_kecheng",
					// 	url: "/pages/kechengguanli/kechengguanli"
					// },
					// {
					// 	candan_name: "数据展示",
					// 	pic: "../../static/caidan/guanliyuan.png",
					// 	shenfen: "get_shujuzhanshi",
					// 	url: "/pages/shuju/shuju"
					// },
					// {
					// 	candan_name: "销售",
					// 	pic: "../../static/caidan/xiaoshou.png",
					// 	shenfen: "update_xiaoshou",
					// 	url: "/pages/xiaoshou/xiaoshou"
					// },
					// {
					// 	candan_name: "班级风采",
					// 	pic: "../../static/caidan/xiaoyuanfengcai.png",
					// 	shenfen: "get_xiaoyuanfengcai",
					// 	url: "/pages/banjifengcai/banjifengcai"
					// },
					// {
					// 	candan_name: "财务",
					// 	pic: "../../static/caidan/caiwu.png",
					// 	shenfen: "update_caiwu",
					// 	url: "/pages/caiwu/caiwu"
					// },
					// {
					// 	candan_name: "我的课程",
					// 	pic: "../../static/caidan/wodekecheng.png",
					// 	shenfen: "get_mykecheng",
					// 	url: "/pages/mykecheng/mykecheng"
					// },
					// {
					// 	candan_name: "销课统计",
					// 	pic: "../../static/caidan/xiaoketongji.png",
					// 	shenfen: "get_xiaoketongji",
					// 	url: "/pages/xiaoketongji/xiaoketongji"
					// },
					// {
					// 	candan_name: "报课统计",
					// 	pic: "../../static/caidan/baoketongji.png",
					// 	shenfen: "get_baoketongji",
					// 	url: "/pages/tongji/tongji"
					// },
					// {
					// 	candan_name: "排课计划",
					// 	pic: "../../static/caidan/paikejihua.png",
					// 	shenfen: "update_paikejihua",
					// 	url: "/pages/paikejihua/paikejihua"
					// }
				],
				quankezx_userinfo: {
					permission: []
				},
				index: '',
				bannerlists: []
			}
		},
		async onLoad() {
			this.bannerlists = uni.getStorageSync('quankezx_bannerlists')
			this.quankezx_userinfo = await uniCloud.getCurrentUserInfo()
			this.quankezx_name_tel_fun()
			this.bannerlists_fun()
			this.caidanlists.forEach((item, index) => {
				if (this.quankezx_userinfo.permission.indexOf(item.shenfen) != -1) {
					this.caidanshu++
				}
			})
		},
		methods: {
			// 获取自己的名字和电话并入缓存
			quankezx_name_tel_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 12, //类型为1时，获取我管理的校区
						tiaojian:{
							_id: this.quankezx_userinfo.uid
						}
					}
				}).then(res => {
					console.log("444",res);
					uni.setStorageSync('quankezx_name_tel', res.result.data[0])
				})
			},
			
			// 点菜单时程序 
			caidan(e) {
				uni.navigateTo({
					url: e.url,
					})
			},
			//获取轮播图信息
			bannerlists_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 3, //获取轮播图片
					}
				}).then(res => {
					this.bannerlists = res.result.res.data
					uni.setStorageSync('quankezx_bannerlists', res.result.res.data)
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>